<template>
    <el-tree show-checkbox node-key='id' ref='treeRef' :props='treeDefaultProps' :data='menuData' @node-click='nodeClick'></el-tree>
</template>

<script lang="ts" setup>
    import { computed, defineExpose, ref } from "vue"
    import { useStore } from "vuex"
    const $store = useStore()

    const treeRef = ref()

    const treeDefaultProps = {
        children: 'children',
        label: 'name'
    }
    const menuData = computed(() => $store.state.menu.menus)

    const $emit = defineEmits<{
        (e : 'nodeClick', id : number) : void
    }>()

    function nodeClick(data) {
        $emit('nodeClick', data.id)
    }

    function getValues() {
        return [...treeRef.value.getCheckedKeys()]
    }

    function setValues(values) {
        treeRef.value.setCheckedKeys(values)
    }

    defineExpose({
        getValues,
        setValues
    })
</script>